<script setup>
import { ref, reactive } from 'vue'
import xgTable from '../../components/xgTable.vue'
import { getMovieList, movieRemove, getMovieAreaList, getMovieTypeList, movieUpdate } from '@/api/movie'
import { ElMessage } from 'element-plus'
import { getCols } from './cols'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
// 获取列表数据
const loading = ref(false)
const total = ref(0)
const data = ref([])
const params = ref({})
loading.value = true
// 获取电影列表
getList()
function getList (page = 1, pageSize = 10) {
  getMovieList({page, pageSize, ...params.value}).then(res => {
    total.value = res.total
    data.value = res.data
    loading.value = false
  })
}

// 表格头部和单元格配置
const cols = getCols()
cols.push({ prop: 'operation', title: '操作', width: 130 })

// 获取地区列表
getMovieAreaList().then(res => {
  const area = cols.find(item => item.prop === 'areaId')
  const areaList = reactive({})
  res.data.forEach(item => {
    areaList[item.id] = item.name
  })
  area.fun = (areaId) => {
    return areaList[areaId]
  }
})
// 获取类型列表
getMovieTypeList().then(res => {
  const type = cols.find(item => item.prop === 'typeId')
  const typeList = reactive({})
  res.data.forEach(item => {
    typeList[item.id] = item.name
  })
  type.fun = (typeId) => {
    return typeList[typeId]
  }
})
let selectData = []
const getSelectData = (data) => {
  selectData = data
}
// 删除
function remove () {
  const id = selectData.map(item => item.id)
  console.log(id)
  movieRemove({ id }).then(res => {
    getList()
    ElMessage.success({
      content: '删除成功',
      duration: 2000
    })
  }).catch(err => {
    ElMessage.error(err.msg)
  })
}
</script>

<template>
  <div class="main-context">
    <div class="mb15">
      <el-button type="primary" @click="$router.push('movieEdit')" :icon="Plus">新增</el-button>
      <el-button type="warning" @click="$router.push('movieEdit')" :icon="Edit">修改</el-button>
      <el-button type="danger" @click="remove" :icon="Delete">删除</el-button>
    </div>
    <xgTable ref="xgTableRef" :data="data" :total="total" @page-change="getList" @get-select-data="getSelectData">
      <template v-for="col in cols" :key="col.prop">
        <el-table-column :prop="col.prop" :label="col.title" :width="col.width" :show-overflow-tooltip="col.ellipsis" >
          <template #header>
            <div>{{ col.title }}</div>
            <el-input v-model="params[col.prop]" type="text" size="small" @change="() => { getList() }"></el-input>
          </template>
          <template #default="{row}">
            <img :src="row[col.prop]" height="20" v-if="col.isPic && row[col.prop]">
            <span v-html="col.fun(row[col.prop])"  v-else-if="col.fun"></span>
            <span v-else>{{ row[col.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </xgTable>
  </div>
</template>

<style scoped>
</style>
